<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>头像上传</title>
  <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>

<body class="pear-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-xs9">
      <div style="height:325px;background-color: rgb(247, 247, 247);">
        <img id="sourceImage" src="">
      </div>
    </div>
    <div class="layui-col-xs3" style="padding-left:0px;">
      <div id="previewImage"
        style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
      </div>
    </div>
  </div>
  <div class="layui-row">
    <div class="layui-form-item">
      <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
        <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate"
          data-option="-15" title="左旋15°"></button>
        <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate"
          data-option="15" title="右旋15°"></button>
        <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset"
          title="重置"></button>
        <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload"
          title="选择图片"></label>
        <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
      </div>
      <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
    </div>
  </div>
  <script src="../../../component/layui/layui.js"></script>
  <script src="../../../component/pear/pear.js"></script>
  <script>
    layui.use(['jquery','layer','cropper'],function() {
      let $=layui.jquery;
      let layer=layui.layer;
      let cropper=layui.cropper;

      var options={
        aspectRatio: 1/1, // 裁剪框比例
        preview: '#previewImage', // 预览div
        viewmode: 1
      };

      $("#sourceImage").attr("src",parent.layui.$("#userAvatar").attr("src"));
      $("#sourceImage").cropper(options);

      window.submitForm=function() {
        $("#sourceImage").crossOrigin='anonymous';//解决跨域图片问题
        $("#sourceImage").cropper("getCroppedCanvas",{
          width: 280,
          height: 140
        }).toBlob(function(blob) {
          var timeStamp=Date.parse(new Date());
          var fileName=timeStamp+'.jpg';
          var formData=new FormData();
          formData.append('file',blob,fileName);
          formData.append('fileName',fileName);
          formData.append('fileToken',timeStamp);

          var reader=new FileReader();
          reader.readAsDataURL(blob);
          reader.onload=function(e) {
            var data={
              index: parent.layer.getFrameIndex(window.name),
              newAvatar: e.target.result
            };
            console.log(data);
            parent.window.callback(data);
          };
        });
      }

      $(".pear-btn").on('click',function() {
        var event=$(this).attr("cropper-event");

        if(event==='rotate') {
          var option=$(this).attr('data-option');
          $("#sourceImage").cropper('rotate',option);
        } else if(event==='reset') {
          $("#sourceImage").cropper('reset');
        }

        $("#uploadPicture").change(function() {
          var r=new FileReader();
          var f=this.files[0];

          var uploadFileSize=f.size/1024;
          if(uploadFileSize>5120) {
            parent.layer.msg("上传文件不得超过5m",{icon: 5});
            return false;
          }

          r.readAsDataURL(f);
          r.onload=function(e) {
            $("#sourceImage")
              .cropper('destroy')
              .attr('src',this.result)
              .cropper(options);
          };
        });
      });
    });
  </script>
</body>

</html>